<template>
  <div class="col main-content">
    <div class="row tool-bar">
      <div class="col">
        <el-input v-model="search.key" style="width: 200px" clearable placeholder="请输入查询信息"></el-input>
        <el-button type="primary" @click="searchData"><i class="icon icon-search"></i></el-button>
        <el-button type="primary" @click="openCreateAdmin"><i class="fa fa-authUser"></i> 添加管理员</el-button>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <el-table
          ref="form"
          :data="admins"
          border
          tooltip-effect="dark"
          style="width: 100%"
          :v-loading="loading"
        >
          <el-table-column
            label="#" width="48">
            <template slot-scope="scope">{{ scope.$index+1 }}</template>
          </el-table-column>
          <el-table-column
            label="用户名"
            width="120">
            <template slot-scope="scope">{{ scope.row.userName }}</template>
          </el-table-column>
          <el-table-column
            prop="nickName"
            label="昵称"
            width="120">
          </el-table-column>
          <el-table-column
            label="电子邮件"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <h-email-dispaly v-model="scope.row"/>
            </template>
          </el-table-column>
          <el-table-column
            label="状态" width="100"
          >
            <template slot-scope="scope">
              <div class="center">
                <div v-if="scope.row.isLocked==0">
                  <div class="el-alert el-alert--success is-center">
                    正常
                  </div>
                </div>
                <div v-else="scope.row.isLocked==1" class="el-alert el-alert--error is-center">
                  已锁定
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="操作" width="130" fixed="right">
            <template slot-scope="scope">
              <div class="center">
                <el-button type="text" @click="changePwd(scope.$index,scope.row)">
                  修改密码
                </el-button>
                <el-button v-if="scope.row.isLocked==0" type="text" @click="locked(scope.$index, scope.row)"
                           class="red">
                  锁定
                </el-button>
                <el-button v-else="scope.row.isLocked==1" @click="unLocked(scope.$index, scope.row)" type="text">
                  解锁
                </el-button>
              </div>
            </template>

          </el-table-column>
        </el-table>
        <div class="h-pagination">
          <el-pagination
            @size-change="handleCurrentChange"
            @current-change="handleCurrentChange"
            :current-page="search.pagination.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="search.pagination.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="search.pagination.total">
          </el-pagination>
        </div>
      </div>
    </div>
    <create-admin :title="title" @created="createdAdmin"
                  :show.sync="createAdmin"></create-admin>

    <h-admin-change-password-dialog v-model="currentData" :show.sync="showChagePassword" title="修改密码"/>
  </div>
</template>
<style>

</style>
<script>
  import AdminService from 'src/service/admin'
  import CreateAdmin from './components/CreateAdmin.vue'
  import HEmailDispaly from 'src/components/common/display/HEmailDisplay'
  import HAdminChangePasswordDialog from 'src/components/admin/common/HAdminChangePasswordDialog'

  export default {
    components: {CreateAdmin, HEmailDispaly, HAdminChangePasswordDialog},
    name: 'AdminSystemAdmin',
    data() {
      return {
        search: {
          key: null,
          pagination: {
            total: 0,
            page: 1,
            limit: 10
          }
        },
        loading: false,
        admins: [],
        createAdmin: false,
        showChagePassword: false,
        title: '创建管理员',
        currentData: {}
      }
    },
    methods: {
      locked: function (index, data) {
        const me = this
        me.$confirm('锁定用户后该用户将不可登录?', '提示', {
          confirmButtonText: '确认锁定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          AdminService.lockedAdmin({
            id: data.id,
            isLocked: 1
          }).then(r => {
            if (r != null) {
              me.$message.success('锁定用户成功!')
              data.isLocked = 1
            }
          })
        })
      },
      changePwd: function (index, data) {
        this.currentData = data
        this.showChagePassword = true
      },
      unLocked: function (index, data) {
        const me = this
        me.$confirm('是否执行该操作,进行操作后该用户将可正常进行登录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          AdminService.lockedAdmin({
            id: data.id,
            isLocked: 0
          }).then(r => {
            if (r != null) {
              me.$message.success('解锁用户成功!')
              data.isLocked = 0
            }
          })
        })
      },
      handleCurrentChange: function () {

      },
      openCreateAdmin: function () {
        this.createAdmin = true
      },
      createdAdmin: function (data) {
        this.createAdmin = false
        this.getData()
      },
      updated: function (data) {
        this.getData()
      },
      searchData: function () {
        this.search.pagination.page = 1
        this.getData()
      },
      getData: function () {
        const me = this
        me.loading = true
        AdminService.searchAdmin(this.search).then(function (data) {
          if (data != null) {
            me.admins = data.datas
            me.search.pagination = data.pagination
          }
          me.loading = false
        })
      }
    },
    beforeMount: function () {
      this.getData()
    }
  }
</script>
